<template>
  <div>
    <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
      <div class="widget am-cf">
        <div class="widget-head am-cf">
          <div class="widget-title am-fl">来源设置</div>
        </div>
        <div class="widget-body  am-fr">
          <customer-toolbar ref="toolbar" class="toolbar" @search="handleFind"
                            areaTeam needInitSearch
          ></customer-toolbar>
          <div class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group am-fr am-text-right">
            <button @click="handleAddBig" type="button" class="btn-search am-btn am-btn-default am-btn-success">
              <span class="am-icon-search"></span>新建大类
            </button>
          </div>
          <div class="am-u-sm-12">
            <el-table
              :data="tableData"
              border
              maxHeight="600"
              empty-text="暂无数据"
              stripe
              style="min-width: 100%">
              <el-table-column
                prop="areaTeamName"
                min-width="160"
                label="区域">
              </el-table-column>
              <el-table-column
                prop="categoryName"
                min-width="160"
                label="来源大类">
              </el-table-column>
              <el-table-column
                min-width="160"
                label="最后操作时间">
                <template scope="scope">
                  <div>{{scope.row.updateTime | formatTime}}</div>
                </template>
              </el-table-column>
              <el-table-column
                min-width="260"
                label="操作">
                <template scope="scope">
                  <el-button v-if="hasPermission('edit_big')" @click="handleAddBig(scope.row)">编辑</el-button>
                  <el-button v-if="hasPermission('add_small')" @click="handleAddSmall(scope.row)">添加小类</el-button>
                  <el-button v-if="hasPermission('edit_big')" @click="handleDel(scope.row.categoryId)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
  import io from '../../lib/io'
  import CustomerToolbar from './CustomerToolbar.vue'

  export default{
    data:function(){
      return {
        tableData: [],
        query: {},
      }
    },
    components: {
      CustomerToolbar
    },
    mounted :function(){
      $(window).smoothScroll()
    },
    methods:{
      handleAddBig (row) {
        if (row.categoryId) {
          this.$router.push('/main/crm/addBigCategory?info=' + JSON.stringify(row))
        } else {
          this.$router.push('/main/crm/addBigCategory?areaTeamId=' + this.$refs.toolbar.query.areaTeamId)
        }
      },
      handleAddSmall (row) {
        this.$router.push('/main/crm/addSmallCategory?categoryId=' + row.categoryId)
      },
      handleDel (categoryId) {
        this.$confirm('确认删除吗？', () => {
          io.post(io.delBigFromCategory, {
            categoryId: categoryId
          }, (ret) => {
            if (ret.success) {
              this.$toast('删除成功')
              this.loadTableData()
            } else {
              this.$alert(ret.desc)
            }
          })
        })
      },
      handleFind(formData) {
        this.query = this.formatData(formData)
        this.loadTableData()
      },
      loadTableData: function () {
        this.$showLoading()
        io.post(io.bigFromCategory, this.query, (ret) => {
          this.$hiddenLoading()
          if (ret.success) {
            this.tableData = ret.data
            this.tableData.map(val => {
              val.areaTeamName = this.query.areaTeamName
            })
          } else {
            this.$alert(ret.desc)
          }
        })
      },
      formatData(formData) {
        return {
          areaTeamId: formData.areaTeamId,
          areaTeamName: formData.areaTeamName,
        }
      }
    }
  }
</script>
<style lang="less" scoped>
</style>
